import React, { useEffect } from "react";
import { Tabs } from 'antd';
import { get_list,check_children } from "../../api/index";
import { useDispatch, useSelector } from "react-redux";
import { RootDispatch, RootState, listItem } from "../../untils/index";
type Props = {};

const Classfy = (props: Props) => {
  const { TabPane } = Tabs;
  const dispatch: RootDispatch = useDispatch();
  useEffect(() => {
    dispatch(get_list());
  }, []);
  const data = useSelector((state: any) => {
    return state.reducer.data;
  });
  const childrenData = useSelector((state: any) => {
    return state.reducer.childrenData;
  });
  console.log(data);
  const onChange = (key:any) => {
     dispatch(check_children(key))
  };
  return <div>
     <Tabs defaultActiveKey="1" onChange={onChange}>{
      data&&data.map((item:any,index:any)=>{
         return  <TabPane tab={item.title} key={index}>{
          childrenData&&childrenData.map((item:any,index:any)=>{
            return <div key={index}>
              <img src={item.img} alt="" />
              <p>{item.title}</p>
            </div>
          })
         }
       </TabPane>
      })
     }
  </Tabs>
  </div>;
};

export default Classfy;
